<template>
	<view class="casePopupView">
		<view class="title" :style="{'height': navHeight+statusBarHeight + 'px'}">
			<text class="iconfont iconhuaban73" @tap="$emit('close')"></text>
			<view class="serch">
				<text class="iconfont iconhuaban18" @tap="getCase()"></text>
				<input type="text" v-model="keyword" confirm-type="search" @confirm="getCase()" placeholder="搜索案列关键字" />
			</view>
		</view>
		<cl-filter-bar @change="changeCase()">
			<!-- 多选下拉 -->
			<cl-filter-item v-model="houseData.val" label="户型" :labelText="'name'" :options="houseData.list"
				type="dropdown" value="value"></cl-filter-item>
			<cl-filter-item v-model="areaData.val" label="面积" :labelText="'name'" :options="areaData.list"
				type="dropdown" prop="zh"></cl-filter-item>
			<cl-filter-item v-model="styleData.val" label="风格" :labelText="'name'" :options="styleData.list"
				type="dropdown" :value="'id'" prop="zh"></cl-filter-item>
			<cl-filter-item v-model="offerData.val" label="预算" :labelText="'name'" :options="offerData.list"
				type="dropdown" prop="zh"></cl-filter-item>
		</cl-filter-bar>
		<scroll-view class="listBoxScroll" :scroll-y="true" @scrolltolower="caseScrollEvent()">
			<view class="listBox" v-for="(item,idx) in caseData.data" :key="idx">
				<image class="leftImg" :src="item.thumb_url[0].path" v-if="item.thumb_url[0]"></image>
				<view class="box">
					<view class="d1">{{item.title}}</view>
					<view class="d2">{{ item.area }}㎡<text></text>{{ item.house_type }}<text></text>{{item.offer}}万</view>
					<view class="d3" v-for="(item2,index2) in item.design_style" :key="index2">{{ item2.name }}</view>
				</view>
				<view class="col-3" @tap="$emit('sendPopupMsg',item,'case');$emit('close')">
					<text class="iconfont iconhuaban64"></text>
					<text>发送</text>
				</view>
			</view>
			<view class="tips" v-if="caseData.noMore">没有更多了！</view>
		</scroll-view>

	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	import clFilterBar from "./cl-uni/components/cl-filter-bar/cl-filter-bar.vue"
	import clFilterItem from "./cl-uni/components/cl-filter-item/cl-filter-item.vue"

	export default {
		components: {
			clFilterBar,
			clFilterItem
		},
		data() {
			return {
				houseData: {
					list: [],
					val: ''
				},
				areaData: {
					list: [],
					val: ''
				},
				styleData: {
					list: [],
					val: ''
				},
				offerData: {
					list: [],
					val: ''
				},
				keyword: '',
				caseData: {
					noMore: false,
					status: 1,
					data: [],
					page: 1,
					pagesize: 10,
					total: ''
				},
			}
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight() {
				let systemInfo = uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			}
		},
		mounted() {
			this.getCase();
			this.getOption();
		},
		methods: {
			changeCase() {
				this.caseData.page = 1;
				this.caseData.noMore = false;
				this.getCase();
			},
			caseScrollEvent() {
				if (this.caseData.noMore) {
					return
				};
				this.caseData.page++;
				this.getCase(true);
			},
			getOption() {
				customeApi.getOptionList({}).then(res => {
					if (res.code === 1) {

						this.houseData.list = res.data.house_type;
						this.styleData.list = res.data.design_style;
						this.areaData.list = res.data.area_section;
						this.offerData.list = res.data.budget_section;
						this.houseData.list.map(item => {
							item['label'] = item.name;
							delete item.name
						});
						this.styleData.list.map(item => {
							item['label'] = item.name;
							delete item.name;
							delete item.value;
							item['value'] = item.id;

						})
						this.areaData.list.map(item => {
							item['label'] = item.name;
							delete item.name
						});
						this.offerData.list.map(item => {
							item['label'] = item.name;
							delete item.name
						});

						this.houseData.list.unshift({
							'label': '全部',
							'value': null
						})
						this.styleData.list.unshift({
							'label': '全部',
							'value': null
						})
						this.areaData.list.unshift({
							'label': '全部',
							'value': null
						})
						this.offerData.list.unshift({
							'label': '全部',
							'value': null
						})
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getCase(paging = false) {
				if (!paging) {
					this.caseData.page = 1;
				}
				customeApi.caseList({
					keyword: this.keyword,
					bedroom_num: this.houseData.val,
					area: this.areaData.val,
					offer: this.offerData.val,
					style: this.styleData.val,
					page: this.caseData.page,
					pagesize: this.caseData.pagesize
				}).then(res => {
					if (res.code === 1) {
						if (this.caseData.page * this.caseData.pagesize >= res.data.count) {
							this.caseData.noMore = true;
						}else{
							this.caseData.noMore = false;
						}
						if (paging) {
							res.data.list.map(item => {
								this.caseData.data.push(item);
							});
						} else {
							this.caseData.data = res.data.list;
						}
						this.caseData.status = 2;
					} else {
						this.caseData.status = 3;
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.casePopupView {
		background: #F9FAFC;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.tips {
			line-height: 80rpx;
			text-align: center;
			//color: #333;
		}

		.title {
			display: flex;
			width: 100%;
			height: 88rpx;
			background: #F6F7FB;
			align-items: center;

			.iconhuaban73 {
				font-size: 36rpx;
				color: #333333;
				padding: 0 20rpx;
			}

			.serch {
				display: flex;
				align-items: center;
				width: 422rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 34rpx;

				.iconhuaban18 {
					font-size: 32rpx;
					color: #939393;
					padding: 0 20rpx 0 10rpx;
				}

			}
		}


		.listBoxScroll {
			flex: 1;
			overflow: hidden;
		}

		.listBox {
			background-color: #fff;
			display: flex;
			padding: 10rpx 0;
			margin:0 30rpx 30rpx 30rpx;
			border-radius: 18rpx;
			justify-content: space-between;

			&:nth-child(1) {
				border-radius: 0 0 18rpx 18rpx;
			}

			.leftImg {
				width: 212rpx;
				height: 212rpx;
				border-radius: 8rpx;
			}

			.box {
				flex: 1;
				margin-left: 30rpx;

				.d1 {
					margin-top: 10rpx;
					height: 96rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.d2 {
					display: flex;
					color: #939393;
					font-size: 22rpx;
					margin-top: 10rpx;
					height: 32rpx;
					align-items: center;

					text {
						margin: 0 10rpx;
						height: 20rpx;
						border-left: 1rpx #939393 solid;
					}
				}

				.d3 {
					margin-right: 10rpx;
					float: left;
					margin-top: 15rpx;
					padding: 0 20rpx;
					line-height: 40rpx;
					background: #F9F6F3;
					border-radius: 18rpx;
					font-size: 24rpx;
					color: #A98F68;
					font-weight: 400;
					text-align: center;
				}
			}

			.col-3 {
				width: 76rpx;
				height: 212rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #F9F6F3;
				border: 2px solid #C3AB7C;
				color: #C3AB7C;
				border-radius: 8px;

				.iconfont {
					font-size: 42rpx;
				}
			}
		}
	}
</style>
